<template>
  <div ref="mainCon" class="container">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form
          :inline="true"
          :model="filterField"
          ref="searchConditions"
          label-position="left"
          label-width="76px"
        >
          <el-col :lg="8" :xl="6">
            <el-form-item label="配置名称：" class="row-padding-bottom">
              <span>{{ configName }}</span>
            </el-form-item>
            <el-button
              type="text"
              icon="icon iconfont iconbianji"
              v-sdc
              @click="editName"
              style="margin-top: -4px; margin-left: 6px"
            >
              <span style="margin-left: 6px">编辑</span>
            </el-button>
            <!-- <el-button class="commonBut saveBtn funComBut" v-sdc @click="editName">
                        修改名称
                    </el-button> -->
          </el-col>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          :data="tableList"
          ref="tableBox1"
          :max-height="tableHeight"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="name"
            label="人员类型"
            width="180"
          ></el-table-column>
          <el-table-column
            label="是否八大员"
            align="center"
            :formatter="formatTd"
            width="120"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.isEmpEight == 0 ? '否' : '是' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="industryNames"
            label="适用行业"
            align="center"
            :formatter="formatTd"
            min-width="150"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="left"
            fixed="right"
            width="110px"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="revise(scope.row)">修改</el-link>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <!-- <Pagination ref="pagination" @getList="getTableList" :filterField="filterField" :requestUrl="requestUrl"></Pagination> -->
      </div>
      <!-- 添加弹窗 -->
      <el-dialog
        title="修改"
        :visible.sync="showDialog"
        :close-on-click-modal="false"
        @close="closeDialog()"
        custom-class="dialog-minwidth"
        width="800px"
        :modal-append-to-body="false"
        :append-to-body="true"
      >
        <el-form
          :model="eightForm"
          :rules="formRule"
          ref="eightForm"
          class="eightForm"
        >
          <el-form-item label="人员类型：" :label-width="formLabelCardWidth">
            <span>{{ eightForm.name }}</span>
          </el-form-item>
          <el-row class="row-padding-bottom">
            <el-col :span="24" class="col-position">
              <el-form-item
                label="是否八大员："
                prop="isEmpEight"
                :label-width="formLabelCardWidth"
              >
                <el-radio-group
                  v-model="eightForm.isEmpEight"
                  @change="selectTab"
                >
                  <el-radio
                    :label="1"
                    :disabled="eightForm.type == '80' ? true : false"
                    >是</el-radio
                  >
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item
            label="适用行业："
            prop="industryIds"
            :label-width="formLabelCardWidth"
            v-if="eightForm.isEmpEight == 1"
          >
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              class="checkboxColor"
              >全选</el-checkbox
            >
            <el-checkbox-group
              v-model="eightForm.industryIds"
              @change="getCheckedEightMem"
              v-on:click.stop.native
              class="checkboxColor"
            >
              <el-col :span="8" v-for="item in eightMemList" :key="item.code">
                <el-checkbox :label="item.code">{{ item.name }}</el-checkbox>
              </el-col>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="closeDialog()" class="cancel"
            >取 消</el-button
          >
          <el-button
            type="primary"
            class="save"
            @click.native="saveRole()"
            :loading="isSaveLoading"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- 修改名称弹框 -->
      <el-dialog
        title="修改名称"
        width="420px"
        :visible.sync="dialogFormVisible"
        @close="nameCloseDialog()"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        :append-to-body="true"
        class="tipDialog"
      >
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item
            label="修改名称"
            :label-width="formLabelWidth"
            prop="modifyName"
          >
            <el-input
              v-model="form.modifyName"
              placeholder="请输入"
              @blur="form.modifyName = changeValue($event)"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="nameCloseDialog()" class="cancel"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click.native="saveModify"
            class="save"
            :loading="canLogin"
            >保存</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'eightMembersConfList',
  mixins: [scrollTable],
  data() {
    var checkRole = (rule, value, callback) => {
      if (value.length == 0) {
        return callback(new Error('请选择行业'))
      } else {
        callback()
      }
    }
    return {
      titleText: '八大员配置',
      //表格数据
      tableList: [],
      // requestUrl: "api-c/employee/eight/config/list",
      date: [],
      //搜索条件
      filterField: {
        uscc: '', //uscc
      },
      isShow: false, //列表加载
      loading: true,
      showDialog: false, //修改
      eightMemList: [],
      eightMemIds: [],
      eightForm: {
        name: '',
        industryIds: [],
        isEmpEight: '',
        type: '',
      },
      formRule: {
        industryIds: [
          { required: true, validator: checkRole, trigger: 'change' },
        ],
        isEmpEight: [{ required: true, message: '请选择', trigger: 'change' }],
      },
      isSaveLoading: false,
      formLabelCardWidth: '120px',
      isIndeterminate: false,
      checkAll: false,
      dialogFormVisible: false, //修改名称弹框
      form: {
        modifyName: '',
      },
      rules: {
        modifyName: [
          {
            required: true,
            message: '修改部门名称不能为空',
            trigger: 'blur',
          },
        ],
      },
      canLogin: false,
      configName: '',
      formLabelWidth: '80px',
    }
  },
  created() {
    // 获取配置名称
    this.getConfigName()
    this.getList()
    this.getIndustry()
  },
  methods: {
    // 获取列表
    getList() {
      this.axios({
        method: 'post',
        url: 'api-c/employee/eight/config/list',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.loading = false
              if (response.data.result.length > 0) {
                this.isShow = false
                this.tableList = response.data.result
              } else {
                this.isShow = true
              }
            } else {
              this.loading = false
              this.$message({
                message: '获取列表失败',
                type: 'error',
              })
            }
          },
          (response) => {
            this.loading = false
          }
        )
        .catch((error) => {
          this.loading = false
        })
    },
    // 获取配置名称
    getConfigName() {
      this.axios({
        method: 'post',
        url: 'api-c/employee/eight/config/title',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.configName = response.data.result.value
            } else {
              this.$message({
                message: '获取失败',
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    revise(row) {
      this.showDialog = true
      this.getDetail(row.type)
    },
    // 获取修改详情
    getDetail(type) {
      this.axios({
        method: 'post',
        url: 'api-c/employee/eight/config/detail',
        data: {
          type: type,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.eightForm = response.data.result
              if (this.eightForm.isEmpEight == 0) {
                this.eightForm.industryIds = []
              }
              if (this.eightForm.industryIds.length > 0) {
                this.isIndeterminate = true
                this.eightMemIds = this.eightForm.industryIds
              } else {
                var newArr = this.eightMemList.map(function (item, index, arr) {
                  return item.code
                })
                this.eightForm.industryIds = newArr
                this.eightMemIds = newArr
              }
              let checkedCount = this.eightForm.industryIds.length
              this.checkAll = checkedCount === this.eightMemList.length
              this.isIndeterminate =
                checkedCount > 0 && checkedCount < this.eightMemList.length
            } else {
              this.$message({
                message: '获取失败',
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    closeDialog() {
      this.showDialog = false
      this.$refs['eightForm'].resetFields()
    },
    getIndustry() {
      this.axios({
        method: 'get',
        url: 'api-bs/base/dicitem/getuserindustry',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.eightMemList = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {
          that.$message({
            showClose: true,
            duration: 3000,
            message: '获取行业数据失败',
            type: 'error',
          })
        })
    },

    saveRole() {
      this.isSaveLoading = true
      this.$refs.eightForm.validate((valid) => {
        if (valid) {
          this.saveAjax()
        } else {
          this.isSaveLoading = false
          return false
        }
      })
    },
    saveAjax() {
      var data
      if (this.eightForm.isEmpEight == 1) {
        data = {
          type: this.eightForm.type,
          name: this.eightForm.name,
          isEmpEight: this.eightForm.isEmpEight,
          industryIdStr: this.eightMemIds.join(','),
        }
      } else {
        data = {
          type: this.eightForm.type,
          name: this.eightForm.name,
          isEmpEight: this.eightForm.isEmpEight,
        }
      }
      this.axios({
        method: 'post',
        url: 'api-c/employee/eight/config/edit',
        data: data,
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.$message({
                message: '保存成功',
                type: 'success',
              })
              this.showDialog = false
              this.$nextTick(function () {
                this.getList()
                this.isSaveLoading = false
              })
            } else {
              this.$message({
                message: res.data.errorMsg,
                type: 'error',
              })
              this.isSaveLoading = false
            }
          },
          (res) => {
            this.$message({
              message: '保存失败',
              type: 'error',
            })
            this.isSaveLoading = false
          }
        )
        .catch((error) => {
          this.$message({
            message: '保存失败',
            type: 'error',
          })
          this.isSaveLoading = false
        })
    },
    // 单选
    getCheckedEightMem(value) {
      this.eightMemIds = this.eightForm.industryIds
      let checkedCount = value.length
      this.checkAll = checkedCount === this.eightMemList.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.eightMemList.length
    },
    // 全选
    handleCheckAllChange(val) {
      if (val) {
        var newArr = this.eightMemList.map(function (item, index, arr) {
          return item.code
        })
        this.eightForm.industryIds = newArr
        this.eightMemIds = newArr
      } else {
        this.eightForm.industryIds = []
      }
      this.isIndeterminate = false
    },
    // 修改名称
    editName() {
      this.dialogFormVisible = true
      this.form.modifyName = this.configName
    },
    nameCloseDialog() {
      this.dialogFormVisible = false
      this.$refs['form'].resetFields()
    },
    // 保存修改名称
    saveModify() {
      this.canLogin = true
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.axios({
            method: 'post',
            url: 'api-c/employee/eight/config/title/edit',
            data: {
              value: this.form.modifyName,
            },
          })
            .then((response) => {
              this.canLogin = false
              if (!response.data.hasError) {
                this.dialogFormVisible = false
                this.$message({
                  type: 'success',
                  message: response.data.msg,
                })
                this.getConfigName()
              } else {
                this.$message({
                  type: 'error',
                  message: response.data.errorMsg,
                })
              }
            })
            .catch((error) => {
              this.canLogin = false
            })
        } else {
          this.canLogin = false
          return false
        }
      })
    },
    selectTab(val) {
      console.log(this.eightForm.industryIds)
    },
  },
}
</script>

<style lang="less" scoped>
.mainCon {
  top: 210px;
  @media only screen and (max-width: 1366px) {
    /deep/.searchInputWidth .el-form--inline .el-form-item__label {
      width: 100px;
    }
  }
  /deep/ .el-form-item__label {
    padding: 0;
  }
}
.tabLi {
  color: #3a3a3a;
}
@import '../../../static/css/filterArea.less';
</style>
